<template>
    <div class="content-wrap home-wrap">
        <div class="home-container">
            <div class="home-box">
                <p class="box-title">
                    <span>待审核</span>
                </p>
                <ul class="audit-list">
                    <li>
                        <p>{{auditData.zssh}}</p>
                        <p>转售标的待审核(笔)</p>
                    </li>
                    <li>
                        <p>{{auditData.qgsh}}</p>
                        <p>求购标的待审核(笔)</p>
                    </li>
                    <li>
                        <p>{{auditData.txsh}}</p>
                        <p>提现初审(笔)</p>
                    </li>
                    <li>
                        <p>{{auditData.txfs}}</p>
                        <p>提现复审(笔)</p>
                    </li>
                    <li>
                        <p>{{auditData.cgbdqtx}}</p>
                        <p>采购标的到期通知(笔)</p>
                    </li>
                    <li>
                        <p>{{auditData.zsbdqtx}}</p>
                        <p>转售标的到期通知(笔)</p>
                    </li>
                </ul>
            </div>
            <div class="home-box">
                <p class="box-title">
                    <span>{{coreIndex == 0 ? '昨日' : coreIndex == 1 ? '上周' : '上月'}}用户核心数据</span>
                    <span>更新时间：{{coreData.createTime}}</span>
                </p>
                <div class="box-bottom">
                    <ul class="date-list">
                        <li 
                            v-for="(item, index) in dateList" 
                            :key="index" 
                            :class="index == coreIndex ? 'date-active' : ''"
                            @click="chooseCoreDate(index)">
                            {{item}}
                        </li>
                    </ul>
                    <ul class="date-data">
                        <li>
                            <p>
                                {{coreData.signPeople}}
                                <i class="el-icon-top color-red" v-if="coreData.signPeopleMark < 0"></i>
                                <i class="el-icon-bottom color-green" v-if="coreData.signPeopleMark > 0"></i>
                            </p>
                            <p>注册人数（人）</p>
                        </li>
                        <li>
                            <p>
                                {{coreData.realPeople}}
                                <i class="el-icon-top color-red" v-if="coreData.realPeopleMark < 0"></i>
                                <i class="el-icon-bottom color-green" v-if="coreData.realPeopleMark > 0"></i>
                            </p>
                            <p>实名人数（人）</p>
                        </li>
                        <li>
                            <p>
                                {{coreData.purchasePeople}}
                                <i class="el-icon-top color-red" v-if="coreData.purchasePeopleMark < 0"></i>
                                <i class="el-icon-bottom color-green" v-if="coreData.purchasePeopleMark > 0"></i>
                            </p>
                            <p>采购牛人数（人）</p>
                        </li>
                        <li>
                            <p>
                                {{coreData.maturityNum}}
                                <i class="el-icon-top color-red" v-if="coreData.maturityNumMark < 0"></i>
                                <i class="el-icon-bottom color-green" v-if="coreData.maturityNumMark > 0"></i>
                            </p>
                            <p>到期标的数（笔）</p>
                        </li>
                        <li>
                            <p>
                                {{coreData.withdrawNum}}
                                <i class="el-icon-top color-red" v-if="coreData.withdrawNumMark < 0"></i>
                                <i class="el-icon-bottom color-green" v-if="coreData.withdrawNumMark > 0"></i>
                            </p>
                            <p>提现订单（笔）</p>
                        </li>
                        <li>
                            <p>
                                {{coreData.withdrawMoney}}
                                <i class="el-icon-top color-red" v-if="coreData.withdrawMoneyMark < 0"></i>
                                <i class="el-icon-bottom color-green" v-if="coreData.withdrawMoneyMark > 0"></i>
                            </p>
                            <p>提现金额（元）</p>
                        </li>
                        <li>
                            <p>
                                {{coreData.logisticsNum}}
                                <i class="el-icon-top color-red" v-if="coreData.logisticsNumMark < 0"></i>
                                <i class="el-icon-bottom color-green" v-if="coreData.logisticsNumMark > 0"></i>
                            </p>
                            <p>已发货物流数（单）</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="home-box">
                <p class="box-title">
                    <span>{{orderIndex == 0 ? '昨日' : orderIndex == 1 ? '上周' : '上月'}}标的订单数据</span>
                    <span>更新时间：{{orderData.createTime}}</span>
                </p>
                <div class="box-bottom">
                    <ul class="date-list">
                        <li 
                            v-for="(item, index) in dateList" 
                            :key="index" 
                            :class="index == orderIndex ? 'date-active' : ''"
                            @click="chooseOrderDate(index)">
                            {{item}}
                        </li>
                    </ul>
                    <ul class="date-data">
                        <li>
                            <p>
                                {{orderData.cattleNum}}
                                <i class="el-icon-top color-red" v-if="orderData.cattleNumMark < 0"></i>
                                <i class="el-icon-bottom color-green" v-if="orderData.cattleNumMark > 0"></i>
                            </p>
                            <p>采购牛数量（头）</p>
                        </li>
                        <li>
                            <p>
                                {{orderData.resuleNum}}
                                <i class="el-icon-top color-red" v-if="orderData.resuleNumMark < 0"></i>
                                <i class="el-icon-bottom color-green" v-if="orderData.resuleNumMark > 0"></i>
                            </p>
                            <p>转售数量（头）</p>
                        </li>
                        <li>
                            <p>
                                {{orderData.supplyNum}}
                                <i class="el-icon-top color-red" v-if="orderData.supplyNumMark < 0"></i>
                                <i class="el-icon-bottom color-green" v-if="orderData.supplyNumMark > 0"></i>
                            </p>
                            <p>供货数量（头）</p>
                        </li>
                        <li>
                            <p>
                                {{orderData.wantNum}}
                                <i class="el-icon-top color-red" v-if="orderData.wantNumMark < 0"></i>
                                <i class="el-icon-bottom color-green" v-if="orderData.wantNumMark > 0"></i>
                            </p>
                            <p>求购数量（头）</p>
                        </li>
                        <li>
                            <p>
                                {{orderData.supplyMoney}}
                                <i class="el-icon-top color-red" v-if="orderData.supplyMoneyMark < 0"></i>
                                <i class="el-icon-bottom color-green" v-if="orderData.supplyMoneyMark > 0"></i>
                            </p>
                            <p>供货总金额（元）</p>
                        </li>
                        <li>
                            <p>
                                {{orderData.wantMoney}}
                                <i class="el-icon-top color-red" v-if="orderData.wantMoneyMark < 0"></i>
                                <i class="el-icon-bottom color-green" v-if="orderData.wantMoneyMark > 0"></i>
                            </p>
                            <p>求购总金额（元）</p>
                        </li>
                        <li>
                            <p>
                                {{orderData.cattleMoney}}
                                <i class="el-icon-top color-red" v-if="orderData.cattleMoneyMark < 0"></i>
                                <i class="el-icon-bottom color-green" v-if="orderData.cattleMoneyMark > 0"></i>
                            </p>
                            <p>采购牛总金额（元）</p>
                        </li>
                        <li>
                            <p>
                                {{orderData.resuleMoney}}
                                <i class="el-icon-top color-red" v-if="orderData.resuleMoneyMark < 0"></i>
                                <i class="el-icon-bottom color-green" v-if="orderData.resuleMoneyMark > 0"></i>
                            </p>
                            <p>转售总金额（元）</p>
                        </li>
                        <li>
                            <p>
                                {{orderData.fungusCategoryNumG}}
                                <i class="el-icon-top color-red" v-if="orderData.fungusCategoryNumGMark < 0"></i>
                                <i class="el-icon-bottom color-green" v-if="orderData.fungusCategoryNumGMark > 0"></i>
                            </p>
                            <p>木耳采购数量（罐）</p>
                        </li>
                        <li>
                            <p>
                                {{orderData.fungusCategoryX}}
                                <i class="el-icon-top color-red" v-if="orderData.fungusCategoryXMark < 0"></i>
                                <i class="el-icon-bottom color-green" v-if="orderData.fungusCategoryXMark > 0"></i>
                            </p>
                            <p>木耳采购数量（箱）</p>
                        </li>
                        <li>
                            <p>
                                {{orderData.fungusCategoryMoney}}
                                <i class="el-icon-top color-red" v-if="orderData.fungusCategoryMoneyMark < 0"></i>
                                <i class="el-icon-bottom color-green" v-if="orderData.fungusCategoryMoneyMark > 0"></i>
                            </p>
                            <p>木耳采购总金额（元）</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dateList: ['日', '周', '月'],
            auditData: {},
            coreData: {},
            orderData: {},
            
            coreIndex: 0,
            orderIndex: 0,

            currentDate: (new Date(new Date().getTime() + 8 * 3600 * 1000)).toJSON().replace('T', ' ').substr(0, 10)
        }
    },
    created() {
        this.getAuditDataFn()
        this.getCoreDataFn()
        this.getOrderDataFn()
    },
    methods: {
        getAuditDataFn() { //获取待审核数据
            this.$http.get('/Home/listDSHHome')
                .then((res) => {
                    this.auditData = res.data
                })
        },

        getCoreDataFn() { //获取核心数据
            let dateTime = ''
            if(this.coreIndex == 0) {    
                dateTime = 1;
            }
            if(this.coreIndex == 1) {    
                dateTime = 7;
            }
            if(this.coreIndex == 2) {    
                dateTime = 30;
            }
            let params = {
                dateTime: dateTime
            }

            this.$http.get('/Home/listCoreHome', params)
                .then((res) => {
                    this.coreData = res.data
                })
        },

        getOrderDataFn() { //获取订单数据
            let dateTime = ''
            if(this.orderIndex == 0) {    
                dateTime = 1;
            }
            if(this.orderIndex == 1) {    
                dateTime = 7;
            }
            if(this.orderIndex == 2) {    
                dateTime = 30;
            }
            let params = {
                dateTime: dateTime
            }

            this.$http.get('/Home/listOrderHome', params)
                .then((res) => {
                    this.orderData = res.data
                })
        },

        chooseCoreDate(index) { //核心数据
            this.coreIndex = index;
            this.getCoreDataFn()
        },

        chooseOrderDate(index) { //订单数据
            this.orderIndex = index;
            this.getOrderDataFn()
        }
    },
}
</script>

<style lang="scss" scoped>
    .home-wrap {
        background-color: #f2f2f2;
        .home-container {
            height: 86vh;
            overflow-y: auto;
            .home-box {
                width: 100%;
                margin-top: 16px;
                padding: 0 12px;
                box-sizing: border-box;
                background-color: #fff;
                &:nth-of-type(1) {
                    margin-top: 0;
                }
                .box-title {
                    width: 100%;
                    height: 68px;
                    line-height: 68px;
                    span {
                        &:nth-of-type(1) {
                            font-size: 20px;
                            font-weight: bold;
                            color: #4572CF;
                        }
                        &:nth-of-type(2) {
                            margin-left: 58px;
                            color: #5D6164;
                        }
                    }
                }
                .audit-list {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    li {
                        width: 256px;
                        height: 112px;
                        margin-right: 20px;
                        margin-bottom: 24px;
                        padding: 24px 20px 24px 12px;
                        box-sizing: border-box;
                        border-radius: 8px;
                        overflow: hidden;
                        background-color: #ccc;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: cover;
                        color: #fff;
                        text-align: right;
                        &:last-child {
                            margin-right: 0;
                        }
                        &:nth-of-type(1) {
                            background-image: url('https://ym-1251385011.cos.ap-guangzhou.myqcloud.com/images/20191022/15717280370239311.png');
                        }
                        &:nth-of-type(2) {
                            background-image: url('https://ym-1251385011.cos.ap-guangzhou.myqcloud.com/images/20191022/15717280542588802.png');
                        }
                        &:nth-of-type(3) {
                            background-image: url('https://ym-1251385011.cos.ap-guangzhou.myqcloud.com/images/20191022/15717280712653816.png');
                        }
                        &:nth-of-type(4) {
                            background-image: url('https://ym-1251385011.cos.ap-guangzhou.myqcloud.com/images/20191022/15717280815285705.png');
                        }
                        &:nth-of-type(5) {
                            background-image: url('https://ym-1251385011.cos.ap-guangzhou.myqcloud.com/images/20191022/15717280906345932.png');
                        }
                        &:nth-of-type(6) {
                            background-image: url('https://ym-1251385011.cos.ap-guangzhou.myqcloud.com/images/20191022/15717281001631521.png');
                        }
                        p {
                            &:nth-of-type(1) {
                                margin-bottom: 12px;
                                font-size: 32px;
                            }
                            &:nth-of-type(2) {
                                font-size: 16px;
                            }
                        }
                    }
                }
                .box-bottom {
                    .date-list {
                        display: flex;
                        padding-top: 32px;
                        border-top: 2px solid #f2f2f2;
                        li {
                            width: 82px;
                            height: 40px;
                            line-height: 40px;
                            border-radius: 8px;
                            font-size: 20px;
                            text-align: center;
                            cursor: pointer;
                        }
                        .date-active {
                            background-color: #1496F8;
                            color: #fff;
                        }
                    }
                    .date-data {
                        display: flex;
                        flex-wrap: wrap;
                        padding-bottom: 14px;
                        li {
                            width: 180px;
                            margin-right: 20px;
                            padding-top: 24px;
                            padding-left: 14px;
                            padding-bottom: 16px;
                            box-sizing: border-box;
                            p {
                                &:nth-of-type(1) {
                                    margin-bottom: 10px;
                                    color: #344047;
                                    font-size: 20px;
                                    font-weight: bold;
                                }
                                &:nth-of-type(2) {
                                    font-size: 16px;
                                    color: #969C9E;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .color-red {
        color: #FF5D5C;
    }
    .color-green {
        color: #0FB60D;
    }
</style>
